import './index.scss'
import {View, Image, Text, Button} from '@tarojs/components'
import {observer} from 'mobx-react'
import {useContext, useEffect, useState} from 'react'
import Taro, {useDidHide, useDidShow, useLoad, useRouter} from '@tarojs/taro'
import {wxScanAuthStore} from './model'
import {wxScan} from '@/api/user'
import {imagesUrl} from '@/utils/baseUrl'
import MyNav from '@/components/nav'
import scanStore from '@/store/scan'
import {toHome} from '@/utils/pageRedirect'
import {getStorage, removeStorage} from '@/utils/localstoreage'
import {IconImg} from '@/components/images'

const Wxscanauth = () => {
  let router = useRouter()
  const {pageQuery, getPageQuery} = useContext(wxScanAuthStore)

  const {handleScan} = useContext(scanStore)

  const [overTimeTimer, setOverTimeTimer] = useState<
    NodeJS.Timeout | undefined
  >(undefined)

  const [isOverTime, setIsOverTime] = useState(false)

  // 可以使用所有的 React Hooks
  useEffect(() => {
    console.log('Wxscanauth useEffect')
  })

  // 对应 onShow
  useDidShow(() => {
    console.log('Wxscanauth useDidShow')
    if (overTimeTimer) clearTimeout(overTimeTimer)
    let timer = setTimeout(() => {
      setIsOverTime(true)
    }, 50 * 1000)
    setOverTimeTimer(timer)
  })

  // 对应 onHide
  useDidHide(() => {
    console.log('Wxscanauth useDidHide')
    if (overTimeTimer) clearTimeout(overTimeTimer)
  })

  // 对应onLoad 但是路由参数只能通过rotuer获取
  useLoad(() => {
    getPageQuery(router.params, ['address'])
    removeStorage('qrcodeType')
    removeStorage('webScanLogin_address')
  })

  function handleConfirm() {
    const userWeichatId = getStorage('userWeichatId')
    if (!userWeichatId) return
    if (!pageQuery.address) return
    wxScan({
      address: pageQuery.address,
      userWeichatId
    })
      .then(_res => {
        Taro.showToast({
          title: '授权成功!',
          icon: 'success'
        })
        removeStorage('qrcodeType')
        removeStorage('webScanLogin_address')
        toHome()
      })
      .catch(_err => {
        Taro.showToast({
          title: '登陆失败！'
        })
      })
  }
  return (
    <View
      className="w-screen h-screen overflow-hidden flex flex-col justify-between"
      style={{
        backgroundImage: `url(${imagesUrl + 'device-bg.png'})`,
        backgroundSize: '100% 58%',
        backgroundRepeat: 'no-repeat'
      }}
    >
      {/* 自定义头部栏 */}
      <MyNav color="white">微信扫码授权</MyNav>

      <View className="flex-1 w-full pt-0 pb-40 px-16">
        <View className="w-full h-16_24 mt-4_24 rounded-12 bg-white flex flex-col items-center justify-between">
          <View className="w-full flex flex-col items-center mt-120">
            {/* <Image
              src={imagesUrl + 'logo-simple.png'}
              className="w-120 h-120 mt-60"
            ></Image> */}
            <IconImg
              imgName="computer"
              style={{
                width: '240rpx',
                height: '190rpx'
              }}
            ></IconImg>
            <View className="text-22 font-bold mt-16">
              {/* 登录<Text className="mx-4">PC端</Text>设备管理平台 */}
              登录相关设备管理平台
            </View>
            {isOverTime ? (
              <View className="text-12 text-danger mt-8">
                登录确认已失效，请重新扫码登录
              </View>
            ) : null}
          </View>

          {isOverTime ? (
            <Button
              className="px-32 bg-primary text-white mb-60"
              onClick={() => handleScan()}
            >
              重新扫码登录
            </Button>
          ) : (
            <Button
              className="px-32 bg-primary text-white mb-60"
              onClick={handleConfirm}
            >
              确认登录
            </Button>
          )}
        </View>
      </View>
    </View>
  )
}
export default observer(Wxscanauth)
